import React, { useState } from "react";
import { Modal, Input, message } from "antd";
import { useTranslation } from "react-i18next";
import { encryption, post_axios } from "../../utils";
import sha1 from "js-sha1";

export default function ChangePwd(props) {
  // 旧密码
  const [change_pwd_oldPwd, setChange_pwd_oldPwd] = useState("");
  // 新密码
  const [change_pwd_newPwd, setChange_pwd_newPwd] = useState("");
  // 再次输入新密码
  const [change_pwd_newPwd_again, setChange_pwd_newPwd_again] = useState("");

  const { t } = useTranslation();

  const [confirmLoading, setConfirmLoading] = useState(false);

  const { username, changePwdShow, setChangePwdShow, login_success_func } =
    props;

  const change_pwd_func = async () => {
    setConfirmLoading(true);

    if (change_pwd_oldPwd === "") {
      message.warning({
        content: t("login.enter_old_pwd"),
      });
      return;
    }
    let reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
    // 限制格式
    if (reg.test(change_pwd_newPwd)) {
      message.warning({
        content: t("system_manager.no_chinese"),
      });
      return;
    }
    // 限制不输入中文
    if (change_pwd_newPwd === "") {
      message.warning({
        content: t("login.enter_new_pwd"),
      });
      return;
    }
    // 限制长度为8-16位
    if (change_pwd_newPwd.length > 16 || change_pwd_newPwd.length < 8) {
      message.warning({
        content: t("login.8_16"),
      });
      return;
    }

    if (change_pwd_newPwd !== change_pwd_newPwd_again) {
      message.warning({
        content: t("login.two_pwd_dirr"),
      });
      return;
    }
    var regex = new RegExp(
      "(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}"
    );
    if (!regex.test(change_pwd_newPwd)) {
      message.warning({
        content: t("login.more_type_pwd"),
      });
      return;
    }
    let upMsg = {
      user: username,
      pwd_old: encryption(sha1(change_pwd_oldPwd)),
      pwd_new: encryption(sha1(change_pwd_newPwd)),
    };
    let res = await post_axios("change.password", "login", upMsg);
    setConfirmLoading(false);
    if (!res) return;
    message.warning({
      content: t("login.change_success"),
      type: "success",
    });
    if (login_success_func) login_success_func(res);
  };
  return (
    <>
      <Modal
        title={t("login.change_pwd")}
        open={changePwdShow}
        onOk={change_pwd_func}
        confirmLoading={confirmLoading}
        onCancel={() => setChangePwdShow(false)}
        classNames={{ body: "edit_dialog_body" }}
        maskClosable={false}
        destroyOnClose={true}
      >
        <Input type="text" readOnly style={{opacity:0,height:0}} />
        <div className="dialog_ipt_box dialog_ipt_box_long normal_title">
          <div className="ipt_box_title">{t("login.old_pwd")}</div>
          <Input.Password
            placeholder={t("login.enter_old_pwd")}
            value={change_pwd_oldPwd}
            onChange={(e) => setChange_pwd_oldPwd(e.target.value)}
          />
        </div>
        <div className="dialog_ipt_box dialog_ipt_box_long normal_title">
          <div className="ipt_box_title">{t("login.new_pwd")}</div>
          <Input.Password
            placeholder={t("login.enter_new_pwd")}
            value={change_pwd_newPwd}
            onChange={(e) => setChange_pwd_newPwd(e.target.value)}
          />
        </div>
        <div className="dialog_ipt_box dialog_ipt_box_long normal_title">
          <div className="ipt_box_title">{t("login.new_pwd")}</div>
          <Input.Password
            placeholder={t("login.enter_new_pwd_again")}
            value={change_pwd_newPwd_again}
            onChange={(e) => setChange_pwd_newPwd_again(e.target.value)}
          />
        </div>
      </Modal>
    </>
  );
}
